import React, { useState } from 'react';
import {
  Card,
  Form,
  Input,
  Select,
  InputNumber,
  Button,
  Typography,
  message,
  Space,
} from 'antd';
import {
  GiftOutlined,
  ArrowLeftOutlined,
} from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';
import { createRequest } from '../../api/request';

const { Title, Text } = Typography;
const { TextArea } = Input;
const { Option } = Select;

const RequestCreate: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const navigate = useNavigate();

  const categories = [
    { value: 1, label: '电影' },
    { value: 2, label: '电视剧' },
    { value: 3, label: '音乐' },
    { value: 4, label: '软件' },
    { value: 5, label: '游戏' },
    { value: 6, label: '电子书' },
    { value: 7, label: '动漫' },
    { value: 8, label: '其他' },
  ];

  const onFinish = async (values: any) => {
    setLoading(true);
    try {
      const response = await createRequest(values);
      if (response.code === 200) {
        message.success('求种发布成功！');
        navigate('/requests');
      } else {
        message.error(response.message || '发布失败');
      }
    } catch (error) {
      console.error('发布求种失败:', error);
      message.error('发布求种失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <Card>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Title level={2} style={{ margin: 0 }}>
              <GiftOutlined style={{ color: '#1890ff', marginRight: 8 }} />
              发起求种
            </Title>
            <Link to="/requests">
              <Button icon={<ArrowLeftOutlined />}>
                返回求种列表
              </Button>
            </Link>
          </div>

          <Text type="secondary">
            发起求种需要消耗魔力值作为悬赏，请确保您有足够的魔力值。
          </Text>

          <Form
            form={form}
            layout="vertical"
            onFinish={onFinish}
            initialValues={{
              rewardPoints: 100,
            }}
          >
            <Form.Item
              label="求种标题"
              name="title"
              rules={[
                { required: true, message: '请输入求种标题' },
                { min: 5, message: '标题至少5个字符' },
                { max: 100, message: '标题不能超过100个字符' },
              ]}
            >
              <Input placeholder="请输入求种标题，如：寻找某某电影高清版本" />
            </Form.Item>

            <Form.Item
              label="分类"
              name="categoryId"
              rules={[{ required: true, message: '请选择分类' }]}
            >
              <Select placeholder="请选择求种分类">
                {categories.map(cat => (
                  <Option key={cat.value} value={cat.value}>
                    {cat.label}
                  </Option>
                ))}
              </Select>
            </Form.Item>

            <Form.Item
              label="悬赏魔力值"
              name="rewardPoints"
              rules={[
                { required: true, message: '请设置悬赏魔力值' },
                { type: 'number', min: 10, message: '悬赏至少10魔力值' },
                { type: 'number', max: 10000, message: '悬赏不能超过10000魔力值' },
              ]}
            >
              <InputNumber
                placeholder="请输入悬赏魔力值"
                style={{ width: '100%' }}
                min={10}
                max={10000}
              />
            </Form.Item>

            <Form.Item
              label="求种描述"
              name="description"
              rules={[
                { required: true, message: '请输入求种描述' },
                { min: 10, message: '描述至少10个字符' },
                { max: 1000, message: '描述不能超过1000个字符' },
              ]}
            >
              <TextArea
                rows={6}
                placeholder="请详细描述您要求的资源，包括格式、分辨率、语言等要求"
              />
            </Form.Item>

            <Form.Item>
              <Space>
                <Button
                  type="primary"
                  htmlType="submit"
                  loading={loading}
                  size="large"
                >
                  发布求种
                </Button>
                <Button size="large" onClick={() => navigate('/requests')}>
                  取消
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Space>
      </Card>
    </div>
  );
};

export default RequestCreate; 